<template>
  <div class="navigation">
    <el-menu mode="horizontal" router style="width: 100%">
      <el-menu-item index="/home/practise/vueyyjc">vue应用基础</el-menu-item>
      <el-sub-menu index="/home/practise/flexbj">
        <template #title>flex布局</template>
        <el-menu-item index="/home/practise/flexbj/flexOne">第一题</el-menu-item>
        <el-menu-item index="/home/practise/flexbj/flexTwo">第二题</el-menu-item>
        <el-menu-item index="/home/practise/flexbj/flexThree">第三题</el-menu-item>
        <el-menu-item index="/home/practise/flexbj/flexFour">第四题</el-menu-item>
        <el-menu-item index="/home/practise/flexbj/flexFive">第五题</el-menu-item>
        <el-menu-item index="/home/practise/flexbj/flexSix">第六题</el-menu-item>
        <el-menu-item index="/home/practise/flexbj/flexSeven">第七题</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/home/practise/computedlx">计算属性</el-menu-item>
      <el-sub-menu index="/home/practise/ifforshow">
        <template #title>条件列表渲染</template>
        <el-menu-item index="/home/practise/ifforshow/ifRender">vifshow</el-menu-item>
        <el-menu-item index="/home/practise/ifforshow/vfor">vfor</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="">
        <template #title>样式渲染</template>
        <el-menu-item index="/home/practise/active/abasic">基础练习</el-menu-item>
        <el-menu-item index="/home/practise/active/amedium">中等练习</el-menu-item>
        <el-menu-item index="/home/practise/active/aadvanced">进阶练习</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/home/practise/eventlx">事件处理</el-menu-item>
      <el-menu-item index="/home/practise/fromlx">表单绑定</el-menu-item>
      <el-menu-item index="/home/practise/watchlx">侦听器</el-menu-item>
      <el-menu-item index="/home/practise/comp">组件基础</el-menu-item>
    </el-menu>
  </div>
  <div><RouterView /></div>
</template>

<script setup></script>

<style scoped>
.navigation {
  display: flex;
  height: 60px;
  gap: 16px; /* 设置每个子元素间距 */
}
</style>
